<template>
    <div class="login-page">
        <!-- 左侧背景图 -->
        <div class="login-bg">
            <div class="bg-overlay"></div>
            <div class="bg-content">
                <h2>探索世界之美</h2>
                <p>加入我们的旅行社区，发现全球精彩目的地</p>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="login-form-container">
            <div class="form-wrapper">
                <!-- 顶部logo -->
                <div class="logo">
                    <i class="fas fa-plane"></i>
                    <span>TravelShare</span>
                </div>

                <!-- 欢迎标题 -->
                <h1 class="welcome-title">欢迎回来</h1>
                <p class="welcome-subtitle">请登录您的账户</p>

                <!-- 登录表单 -->
                <form @submit.prevent="handleLogin" class="login-form">
                    <!-- 邮箱输入 -->
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <div class="input-group">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="email" v-model="email" placeholder="请输入您的邮箱" required />
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-group">
                            <i class="fas fa-lock"></i>
                            <input :type="showPassword ? 'text' : 'password'" id="password" v-model="password"
                                placeholder="请输入您的密码" required />
                            <i :class="['fas', showPassword ? 'fa-eye-slash' : 'fa-eye']"
                                @click="togglePasswordVisibility"></i>
                        </div>
                    </div>

                    <!-- 记住我和忘记密码 -->
                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" v-model="rememberMe" />
                            <span>记住我</span>
                        </label>
                        <router-link to="/forgot-password" class="forgot-password">
                            忘记密码?
                        </router-link>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit" class="login-btn" :disabled="isLoading">
                        <span v-if="!isLoading">登录</span>
                        <span v-else class="loading">
                            <i class="fas fa-spinner fa-spin"></i> 登录中...
                        </span>
                    </button>

                    <!-- 社交登录 -->
                    <div class="social-login">
                        <p class="divider"><span>或使用以下方式登录</span></p>
                        <div class="social-buttons">
                            <button type="button" class="social-btn wechat" @click="socialLogin('wechat')">
                                <i class="fab fa-weixin"></i>
                            </button>
                            <button type="button" class="social-btn weibo" @click="socialLogin('weibo')">
                                <i class="fab fa-weibo"></i>
                            </button>
                            <button type="button" class="social-btn google" @click="socialLogin('google')">
                                <i class="fab fa-google"></i>
                            </button>
                            <button type="button" class="social-btn apple" @click="socialLogin('apple')">
                                <i class="fab fa-apple"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 注册链接 -->
                    <p class="register-link">
                        还没有账号? <router-link to="/register">立即注册</router-link>
                    </p>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import { useAuthStore } from '@/stores/auth';

    export default {
        name: 'LoginPage',
        setup() {
            const router = useRouter();
            const authStore = useAuthStore();

            // 表单数据
            const email = ref('');
            const password = ref('');
            const rememberMe = ref(false);
            const showPassword = ref(false);
            const isLoading = ref(false);

            // 切换密码可见性
            const togglePasswordVisibility = () => {
                showPassword.value = !showPassword.value;
            };

            // 处理登录
            const handleLogin = async () => {
                isLoading.value = true;
                try {
                    await authStore.login({
                        email: email.value,
                        password: password.value,
                        remember: rememberMe.value
                    });

                    // 登录成功后重定向
                    router.push('/');
                } catch (error) {
                    console.error('登录失败:', error);
                    // 这里可以添加错误提示逻辑
                } finally {
                    isLoading.value = false;
                }
            };

            // 社交登录
            const socialLogin = (provider) => {
                console.log(`使用${provider}登录`);
                // 这里可以添加社交登录逻辑
            };

            return {
                email,
                password,
                rememberMe,
                showPassword,
                isLoading,
                togglePasswordVisibility,
                handleLogin,
                socialLogin
            };
        }
    };
</script>

<style scoped>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* 登录页面布局 */
    .login-page {
        display: flex;
        min-height: 100vh;
    }

    /* 左侧背景 */
    .login-bg {
        flex: 1;
        background: url('https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .bg-content {
        position: relative;
        z-index: 1;
        padding: 40px;
        max-width: 600px;
    }

    .bg-content h2 {
        font-size: 36px;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .bg-content p {
        font-size: 18px;
        opacity: 0.9;
    }

    /* 右侧登录表单 */
    .login-form-container {
        width: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background-color: #fff;
    }

    .form-wrapper {
        width: 100%;
        max-width: 400px;
    }

    /* logo样式 */
    .logo {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: bold;
        color: #4CAF50;
    }

    .logo i {
        margin-right: 10px;
        font-size: 28px;
    }

    /* 欢迎标题 */
    .welcome-title {
        font-size: 28px;
        margin-bottom: 8px;
        color: #333;
    }

    .welcome-subtitle {
        font-size: 16px;
        color: #666;
        margin-bottom: 30px;
    }

    /* 表单样式 */
    .login-form {
        width: 100%;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #555;
    }

    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-group i:first-child {
        position: absolute;
        left: 15px;
        color: #777;
    }

    .input-group i:last-child {
        position: absolute;
        right: 15px;
        color: #777;
        cursor: pointer;
    }

    .input-group input {
        width: 100%;
        padding: 12px 15px 12px 45px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: border-color 0.3s;
    }

    .input-group input:focus {
        border-color: #4CAF50;
        outline: none;
    }

    /* 表单选项 */
    .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .remember-me {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #555;
        cursor: pointer;
    }

    .remember-me input {
        margin-right: 8px;
        accent-color: #4CAF50;
    }

    .forgot-password {
        font-size: 14px;
        color: #4CAF50;
        text-decoration: none;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #3d8b40;
    }

    /* 登录按钮 */
    .login-btn {
        width: 100%;
        padding: 14px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-bottom: 25px;
    }

    .login-btn:hover:not(:disabled) {
        background-color: #3d8b40;
    }

    .login-btn:disabled {
        background-color: #a5d6a7;
        cursor: not-allowed;
    }

    .loading i {
        margin-right: 8px;
    }

    /* 社交登录 */
    .social-login {
        margin-bottom: 25px;
    }

    .divider {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: #eee;
    }

    .divider span {
        padding: 0 15px;
    }

    .social-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .social-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        font-size: 20px;
        color: white;
        cursor: pointer;
        transition: transform 0.3s, opacity 0.3s;
    }

    .social-btn:hover {
        transform: translateY(-3px);
        opacity: 0.9;
    }

    .social-btn.wechat {
        background-color: #07C160;
    }

    .social-btn.weibo {
        background-color: #E6162D;
    }

    .social-btn.google {
        background-color: #4285F4;
    }

    .social-btn.apple {
        background-color: #000000;
    }

    /* 注册链接 */
    .register-link {
        text-align: center;
        font-size: 14px;
        color: #666;
    }

    .register-link a {
        color: #4CAF50;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

    .register-link a:hover {
        color: #3d8b40;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .login-bg {
            display: none;
        }

        .login-form-container {
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }
    }

    @media (max-width: 576px) {
        .login-form-container {
            padding: 20px;
        }

        .welcome-title {
            font-size: 24px;
        }

        .welcome-subtitle {
            font-size: 14px;
        }

        .social-buttons {
            gap: 10px;
        }

        .social-btn {
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
    }
</style>